$loop_color:#8bc34a;
$text_color:#fff;
$mask_bg:rgba(0, 0, 0, .2);
$toast_padding: 0px 10px;
$size:40px;
$line_size:40px;
$border_width:2px;
#loader-mask {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    position: fixed;
    overflow: auto;
    z-index: 1000;
    background: $mask_bg;
}

.nv-loader {
    margin: 0;
    padding: 0;
    visibility: visible;
    text-align: center;
    div {
        box-sizing: border-box;
    }
    p {
        padding: 0;
        margin: 0;
        line-height: 1.7;
        font-size: 14px;
        color: $text_color;
    }
    .nv-loader-loop-box {
        width: $size;
        height: $size;
        margin: auto;
        position: relative;
        animation: nv-loader 4s infinite linear;
        .nv-loader-loop-left {
            display: flex;
            top: 0;
            right: 50%;
            bottom: 0;
            left: 0;
            position: absolute;
            overflow: hidden;
        }
        .nv-loader-loop-right {
            display: flex;
            top: 0;
            bottom: 0;
            left: 0;
            position: absolute;
            overflow: hidden;
            right: 0;
            left: 50%;
        }
        .nv-loader-loop-left div {
            margin-left: 1px;
            border-bottom-color: transparent;
            border-left-color: transparent;
            animation: nv-loader-loop-L 1.5s infinite;
        }
        .nv-loader-loop-right div {
            margin-left: -1px;
            left: -100%;
            border-top-color: transparent;
            border-right-color: transparent;
            animation: nv-loader-loop-R 1.5s infinite;
        }
        .nv-loader-loop {
            width: $size;
            border: 1px solid $loop_color;
            border-radius: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            position: absolute;
            transform: rotate(45deg);
            animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
        }
    }
    &.nv-loader-close {
        visibility: hidden;
    }
    &.nv-loader-close {
        display: none;
    }
}


/*布局样式*/

.nv-loader-line {
    height: $size;
    display: flex;
    align-items: center;
    justify-content: center;
    p {
        padding: 0 5px;
    }
    .nv-loader-loop-box {
        width: $line_size;
        height: $line_size;
        margin: inherit;
        .nv-loader-loop {
            width: $size;
            height: $size;
            border-width: $border_width;
        }
    }
}


/*toast样式*/

.nv-loader-toast {
    width: $size*2;
    height: $size*2;
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
    background: rgba(33, 33, 33, .6);
    .nv-loader-loop-box {
        margin: 0;
    }
    &.nv-loader-line {
        width: auto;
        height: $size;
        padding: $toast_padding;
        flex-direction: initial;
    }
}

@keyframes nv-loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes nv-loader-loop-L {
    0% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(45deg);
        display: none;
    }
    100% {
        transform: rotate(405deg);
    }
}

@keyframes nv-loader-loop-R {
    0% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(405deg);
    }
    100% {
        transform: rotate(405deg);
    }
}